<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/aliyun.css" />
		<link rel="stylesheet" href="css/style.css">
	</head>
	<style>
		/* 颜色 #e7491a  #ff3c41 */
		body{background: white;}
		#app{width: 100%;}
		
		.logo{width: 100%;height: 100px;line-height: 100px; text-align: center;margin-top: 22%;}
		.logo .icon{font-size: 50px;}
		.logo .title{font-size: 22px;}
		.logo img{width: 60%;margin-top: 30px;}
		.logo i{font-size: 30px;color: #1E90FF;}
		
		#form{width:70%;margin: 0px auto;}
		#form .arrow{height: 50px;width: 100%; border-bottom: 1px solid #ccc;margin-bottom: 10px;position: relative;}
		#form .arrow div{display:inline-block;float: left;}
		#form .icon{width: 50px;height: 50px;text-align: center;line-height: 50px;font-size: 24px;}
		#form .input{width: calc(100% - 50px);height: 49px;}
		#form input{border: none;border-radius: 0;height: 49px;}
		/* yzm */
		.yzm{position: absolute;top: 7px;right: 0;width: 60px;height: 30px;color: #007AFF;border-radius: 15px;text-align: center;line-height: 33px;font-size: 14px;}
		
		.forget{float: right;height: 30px;margin: 20px 0;color: #ccc;font-size: 14px;}
		.submit{width: 100%;background: #1E90FF;border: none;color: white;margin-top: 20px;height: 40px;border-radius: 25px;font-size: 16px;}
	</style>
	<body>
		<div id="app">
			<div class="logo">
				<span class="icon mui-icon iconfont icon-chengshi"></span>
				<span class="title"><i>智慧 </i> 卫生间</span>
			</div>
			<form id="form">
				<div class="arrow">
					<div class="icon mui-icon iconfont icon-icon_zhanghao"></div>
					<div class="input"><input type="number" class="mobile" placeholder="请输入手机号"></div>
				</div>
				<div class="arrow">
					<div class="icon mui-icon iconfont icon-lock"></div>
					<div class="input"><input type="number" class="code" placeholder="请输入验证码"></div>
					<div class="yzm">获取</div>
				</div>
				<div style="height: 20px;"></div>
				<button type="button" class="submit">立即登录</button>
			</form>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-3.1.0.js"></script>
		<script src="js/tools.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				mui.init();

				if (window.plus) {
					plusReady();
				} else {
					document.addEventListener('plusready', plusReady, false);
				}

				function plusReady() {
					// 设置系统状态栏样式为浅色文字
					plus.navigator.setStatusBarStyle("dark");
					plus.navigator.setStatusBarBackground("#fff");
					// 输入框距离顶部高度
					var phone_height = screen.height;
					$("#form").css("margin-top", (phone_height / 2) - 330);
					// 禁用返回键
					mui.init({
						beforeback: function() {
							return false
						}
					});
					plus.key.addEventListener("backbutton", function() { // 在这里调用plus api
						if (window.IsSureQuit) {
							plus.runtime.quit() // 退出程序 
						} else {
							window.IsSureQuit = true
							mui.toast('再按一次退出程序')
							setTimeout(() => {
								window.IsSureQuit = false
							}, 2000)
						}
					})
					// 获取验证码
					var hq=true;
					$(".yzm").click(function(){
						var Reg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
						if (!Reg.test($(".mobile").val()) ){
							plus.nativeUI.toast("请填写正确的手机号");
							return
						}
						if(hq==true){
							
							//生成随机6位数
							var code = "";
							for (let i = 0; i < 5; i++) {
								var radom = Math.floor(Math.random() * 10);
								code += radom;
							}
							// 保证第一位数字不为零
							var num = Math.ceil(Math.random() * 1000000000 % 9);
							code = num + code;
							sessionStorage.setItem("code",code);
							
							//加载框
							var w = plus.nativeUI.showWaiting( "",{"background":"rgba(0,0,0,0.3)","height":"60px"});
							setTimeout(function(){
								w.close();
							},25000)
							
							
							$.ajax(TOOL.Host + 'loginController/sendMessage', {
								type: 'post',
								data: {
									data:JSON.stringify({
										phoneNum: $(".mobile").val(),
										code:code,
										userType: "2"
									})
								}, 
								headers: { sourceType: 'APP' },
								success: function(res){
									if(res.code == 0){
										mui.toast("验证码已发送！");
										w.close();
										hq=false;
										var time=61;
										var timer=setInterval(function(){
											time--;
											$(".yzm").text(time);
											if(time < 1){
												clearInterval(timer);
												$(".yzm").text("获取");
												hq=true;
											}
										},1000)
									}else{
										w.close();
										console.log(JSON.stringify(res))
										mui.toast("验证码发送失败！");
									}
								}
							});
						}						
					})
					// 登录
					$(".submit").click(function() {
						var Reg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
						if (!Reg.test($(".mobile").val()) ){
							plus.nativeUI.toast("请填写正确的手机号");
							return
						}
						if($(".mobile").val() == ''){
							mui.toast("请填写手机号！");
							return
						}
						if($(".code").val() == ''){
							mui.toast("请填写验证码！");
							return
						}
						if($(".code").val() != sessionStorage.getItem("code")){
							mui.toast("验证码错误！");
							return
						}
						$.ajax(TOOL.Host + 'loginController/login', {
							type: 'post',
							data: {
								data:JSON.stringify({
									sourceType: '2',
									phoneNum: $(".mobile").val(),//手机号
									code: $(".code").val() ,//验证码
									userType:"2"//用户类型
								})
							}, 
							headers: { sourceType: 'APP' },
							success: function(res){
								console.log(JSON.stringify(res));
								if(res.code == 0){
									mui.toast("登录成功");
									localStorage.setItem("user_id",res.data);
									TOOL.setFire("html/index.html","get_info");
									TOOL.setFire("html/mine.html","get_user_info");
									
									setTimeout(function() {
										plus.webview.close("html/login.html");
										plus.navigator.setStatusBarBackground("#eee");
									}, 1500)
								}else{
									mui.toast("登录失败！");
								}
							}
						});
					})
				}
			}
		</script>
	</body>
</html>
